<template>
  <div class="container">{{ text }}</div>
  <button @click="change">改变 Text, {{ msg }}</button>
</template>
<script setup>
// ref 用于定义响应式数据
import { ref, onMounted } from "vue";

// defineProps 用于接收父组件传递过来的数据
// 接收父组件传递过来的数据
const props = defineProps({
  text: {
    type: String,
    default: "默认值",
    required: false,
  },
});

// 生命周期钩子函数
onMounted(() => {
  console.log("mounted");
});

// let text = ref("hello world");

function change() {
  // 修改响应式数据, 需要使用 .value 去修改值
  msg.value = "hello vue3";
}

const msg = ref("hello world");
</script>

<!-- scoped 作用域 -->
<style scoped>
.container {
  background-color: antiquewhite;
}
</style>
